<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*CSS源代码*/
        body{
            background:#CFCFCF;
            margin:0;
            padding:0;
        }

        .page        {
            bottom:0;
            padding-top:200px;
            position:absolute;
            text-align:center;
            top:0;
            width:100%;
        }

        .page h1    { font-size:40px; }
        .page p     { opacity:.8}
        .page a     { margin-top:40px;opacity:.5 }

        .page-home      { background:#00D0BC; color:#00907c; }
        .page-about     { background:#E59400; color:#a55400; }
        .page-contact   { background:#ffa6bb; color:#9e0000; }

        @keyframes rotateFall {
            0%      { transform: rotateZ(0deg); }
            20%     { transform: rotateZ(10deg); animation-timing-function: ease-out; }
            40%     { transform: rotateZ(17deg); }
            60%     { transform: rotateZ(16deg); }
            100%    { transform: translateY(100%) rotateZ(17deg); }
        }

        /* slide in from the bottom */
        @keyframes slideOutLeft {
            to      { transform: translateX(-100%); }
        }

        /* rotate out newspaper */
        @keyframes rotateOutNewspaper {
            to      { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
        }

        /* entering animations --------------------------------------- */
        /* scale up */
        @keyframes scaleUp {
            from    { opacity: 0.3; -webkit-transform: scale(0.8); }
        }

        /* slide in from the right */
        @keyframes slideInRight {
            from    { transform:translateX(100%); }
            to      { transform: translateX(0); }
        }

        /* slide in from the bottom */
        @keyframes slideInUp {
            from    { transform:translateY(100%); }
            to      { transform: translateY(0); }
        }

        .ng-enter       { z-index: 8888; }
        .ng-leave       { z-index: 9999; }

        /* page specific animations ------------------------ */

        /* home -------------------------- */
        .page-home.ng-enter         { animation: scaleUp 0.5s both ease-in; }
        .page-home.ng-leave         { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }

        /* about ------------------------ */
        .page-about.ng-enter        { animation:slideInRight 0.5s both ease-in; }
        .page-about.ng-leave        { animation:slideOutLeft 0.5s both ease-in; }

        /* contact ---------------------- */
        .page-contact.ng-leave      { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
        .page-contact.ng-enter      { animation:slideInUp 0.5s both ease-in; }

    </style>
</head>
<body>

<p><a href="#home">首页</a></p>
<p><a href="#about">关于</a></p>
<p><a href="#contact">联系</a></p>

<div ng-app="animateApp">

    <!-- inject our views using ng-view -->
    <!-- each angular controller applies a different class here -->
    <div class="page {{ pageClass }}" ng-view></div>

    <!-- 定义视图相关模板 -->
    <script type="text/ng-template" id="home.htm">
        <h2> 首页 </h2>
        <p>{{message}}</p>
        <a href="#about">关于</a>
        <a href="#contact">联系</a>
    </script>

    <script type="text/ng-template" id="about.htm">
        <h2> 关于 </h2>
        <p>{{message}}</p>
        <a href="#home">首页</a>
        <a href="#contact">联系</a>
    </script>

    <script type="text/ng-template" id="contact.htm">
        <h2> 联系 </h2>
        <p>{{message}}</p>
        <a href="#home">首页</a>
        <a href="#about">关于</a>
    </script>
</div>

<script type="text/javascript" src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../../bower_components/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js" ></script>
<script type="text/javascript" src="../../bower_components/angular/angular.js"></script>
<script type="text/javascript" src="../../bower_components/angular-translate/angular-translate.js"></script>
<script type="text/javascript" src="../../bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
<script type="text/javascript" src="../../bower_components/angular-messages/angular-messages.js"></script>
<script type="text/javascript" src="../../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="../../bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script type="text/javascript" src="../../bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script type="text/javascript" src="../../bower_components/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<script type="text/javascript" src="../../bower_components/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="../../bower_components/artDialog/dist/dialog.js"></script>
<script type="text/javascript">
    var animateApp = angular.module('animateApp', ['ui.router', 'ngAnimate']);

    animateApp.config(["$stateProvider","$urlRouterProvider",function($stateProvider,$urlRouterProvider) {
        $stateProvider
                .state('/', {
                    templateUrl: 'page-home.html',
                    controller: 'mainController'
                })
                .state('/about', {
                    templateUrl: 'page-about.html',
                    controller: 'aboutController'
                })
                .state('/contact', {
                    templateUrl: 'page-contact.html',
                    controller: 'contactController'
                });
        $urlRouterProvider.otherwise("/");
    }]);

    animateApp.controller('mainController', function($scope) {
        $scope.pageClass = 'page-home';
    });

    animateApp.controller('aboutController', function($scope) {
        $scope.pageClass = 'page-about';
    });

    animateApp.controller('contactController', function($scope) {
        $scope.pageClass = 'page-contact';
    });
</script>
</body>
</html>